<template>
    <div class="permissions">
        <div class="header">
            <span class="role-text">管理角色权限</span>
        </div>

        <div style="display: flex; flex-direction: column;">
            <!-- 全选 -->
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
                全选
            </el-checkbox>

            <div v-for="item in PermissionsData" :key="item._id">
                <el-checkbox v-model="item.checked" @change="handleParentChange(item)">
                    {{ item.title }}
                </el-checkbox>
                <div v-if="item.children && item.children.length" class="subpermissions">
                    <el-checkbox v-for="child in item.children" :key="child._id" v-model="child.checked"
                        @change="handleChildChange(item)">
                        {{ child.title }}
                    </el-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

const PermissionsData = defineModel("PermissionsData")

watch(PermissionsData, (newVal) => {
    newVal.forEach(item => {
        if (item.checked === undefined) {
            item.checked = false;
        }
        if (item.children) {
            item.children.forEach(child => {
                if (child.checked === undefined) {
                    child.checked = false;
                }
            });
        }
    });
}, { immediate: true }); // 初始加载时执行一次


const checkAll = ref(false);
const isIndeterminate = computed(() => {
    // 计算半选状态：部分父权限选中
    const selectedCount = PermissionsData.value.filter(item => item.checked).length;
    return selectedCount > 0 && selectedCount < PermissionsData.value.length;
});

// 父权限变更时同步子权限
const handleParentChange = (item) => {
    if (item.children) {
        item.children.forEach(child => {
            child.checked = item.checked; // 父选则子全选，父不选则子全不选
        });
    }
};

// 子权限变更时同步父权限状态
const handleChildChange = (item) => {
    const allSelected = item.children.every(child => child.checked);
    item.checked = allSelected; // 所有子选则父选，否则父不选
};

// 全选/取消全选逻辑
const handleCheckAllChange = (val) => {
    PermissionsData.value.forEach(item => {
        item.checked = val;
        if (item.children) {
            item.children.forEach(child => {
                child.checked = val; // 全选时同步所有父子权限
            });
        }
    });
};
</script>

<style scoped lang="scss">
.role-text {
    font-weight: 550;
}

.permissions {
    width: 785px;
    margin-left: 10px;
    border: 1px solid rgba(242, 242, 242, 1);
    padding: 15px 20px 0px 20px;
}

.subpermissions {
    margin: 10px 0;
    font-size: 13px;
    color: rgba(242, 242, 242, 1);
}


.header {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
    display: flex;
    align-items: center;

    span {
        font-size: 16px;
        color: #333;
    }
}
</style>